<template>
  <div>
    <van-nav-bar title="通知详情"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="notice-wrapper">
      <div class="notice-head">
        <van-icon class="setting-list-icon"
                  name="setting"
                  color="#87d4eb"
                  size="30"
                  style="vertical-align: -20%;margin-right:5px;" />
        {{obj.title}}
      </div>
      <div class="notice-body">{{obj.details}}</div>
      <div class="notice-hoster">发布人：{{obj.hoster}}</div>
    </div>
  </div>
</template>
<script>

import { getCurrentInstance } from 'vue'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    function onClickLeft () {
      window.history.length > 1 ? proxy.$router.go(-1) : proxy.$router.push('/user/Notice')
    }
    return {
      onClickLeft
    }
  },
  data () {
    return {
      obj: {},
      list: [
        { id: 1, title: '关于原型设计的一些描述', date: '2021.5.13', details: '        在努力了！在努力了！马上就写完了！别催了！别催了！我也不知道什么时候能写好，但是我在写了TAT……', hoster: '刘老师' },
        { id: 2, title: '公告B', date: '2021.5.17', details: 'words222', hoster: '莎莎老师' },
        { id: 3, title: '通知A', date: '2021.5.13', details: 'words111', hoster: '管理员AAA' },
        { id: 4, title: '通知B', date: '2021.5.17', details: 'words22222', hoster: '班主任' },
        { id: 5, title: '公告A', date: '2021.5.13', details: 'words', hoster: '数学老师' },
        { id: 6, title: '公告B', date: '2021.5.17', details: 'words222', hoster: '语文老师' }
      ]
    }
  },
  mounted () {
    const ii = this.list.filter((item) => {
      if (item.id.toString() === this.$route.params.id) return true
      return false
    })
    this.obj = ii[0]
  }
}
</script>
<style lang="scss" scoped>
.notice {
  &-wrapper {
    margin: $margin-horizon;
    padding: $margin-horizon;
    background-color: $theme-color3;
    border-radius: $border-radius;
    color: $theme-color6;
  }
  &-head {
    font-size: $fontsize-3;
    font-weight: 700;
  }
  &-body {
    margin: $margin-horizon 0;
  }
  &-hoster {
    text-align: right;
  }
}
</style>
